<style type="text/css">
	div.user-pwd{
		width:354px;
		height:310px; 
		overflow:hidden;
		border-radius:5px;
		background-color:#FFF;
		margin:210px auto;
		position:relative;
	}
	i.close-btn{
		top:7px;
		right:10px;
	}
	ul.pwd-tip{
		margin:20px auto 10px;
	}
	div.pwd-err{
		position:absolute;
		margin:0px 27px;
	}
	div.pwd-btn{
		margin:10px 27px;
	}
	input.btn-width{
		width: 254px;
	}
	/*1080p*/
	@media screen and (min-device-width:1920px){
		div.user-pwd{
			width:454px;
			height:360px;
			margin:320px auto;
		}
		i.close-btn{
			top:2px;
		}
		input.btn-width{
			width: 354px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	function showNote(noteStr){
		$("#PwdErr").show();
		$("#PwdTip").html(noteStr);
	}

	$("#SavePwd").click(function(){
		var oldPwd = $("#PwdOld").val();
		var pwd = $("#PwdNew").val();
		var confirmPwd = $("#PwdCfm").val();
		if ("" == oldPwd){
			showNote(errStr.oldPwdBlank);
			return;
		}

		if ("" == pwd){
			showNote(errStr.newpwdBlank);
			return;
		}

		if (false == checkIllegalChar(pwd)){
			showNote(errStr.newpwdHasInvChr);
			return;
		}

		if (getCNStrLen(pwd) < 5 || getCNStrLen(pwd) > 63){
			showNote(errStr.newpwdLengthErr);
			return;
		}

		if (pwd != confirmPwd){
			showNote(errStr.pwdNotSame);
			return;
		}

		var oldpwdEncoded = new Base64().base64encode(oldPwd);
		var pwdEncoded = new Base64().base64encode(pwd);
		var data = {};
		data.old_password = oldpwdEncoded;
		data.new_password = pwdEncoded;

		apiModify(data, function(result){
			var code = result[ERR_CODE];
			switch(code){
			case E_NONE:
				$(".close-btn").click();
				stateman.go("login");
				break;
			case E_UNAUTH:
				showNote(errStr.oldPwdError);
				break;
			case E_INLGVALOLDSAME:
				showNote(errStr.newpwdSameOld);
				break;
			case E_PWDBLANK:
				showNote(errStr.newpwdBlank);
				break;
			case E_PWDLEN:
				showNote(errStr.newpwdLengthErr);
				break;
			case E_PWDILLEGAL:
				showNote(errStr.newpwdHasInvChr);
				break;
			default:
				break;
			}
		});
	});
})();
</script>
<div id="ModifyPwd" class="user-pwd">
	<p class="alert-title">{%label.modifyAdmPwd%}</p>
	<i class="tip icon_close color-red close-btn"></i>
	<div class="set-con">
		<ul class="set-con pwd-tip">
			<li class="text-con">
				<label class="desc-lbl">{%label.oldPwd%}</label>
				<input class="text ime-mode-n hover" type="password" maxLength="63" id="PwdOld" value="" />
				<i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<ul class="set-con pwd-tip">
			<li class="text-con">
				<label class="desc-lbl">{%label.newPwd%}</label>
				<input class="text ime-mode-n hover" type="password" maxLength="63" id="PwdNew" value="" placeholder="{%label.pwdLenTip%}" />
				<i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<ul class="set-con pwd-tip">
			<li class="text-con">
				<label class="desc-lbl">{%label.confirmNewPwd%}</label>
				<input class="text ime-mode-n hover" type="password" maxLength="63" id="PwdCfm" value="" placeholder="{%label.pwdLenTip%}" />
				<i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<div class="err-note hidden pwd-err" id="PwdErr">
			<i class="err-icon icon_remind_line"></i>
			<p class="note-str" id="PwdTip"></p>
		</div>
		<div class="btn-con pwd-btn">
			<input id="SavePwd" class="btn btn-width" type="button" value="{%btn.save%}" />
		</div>
	</div>
</div>